<template>


    <div class="my-box flex-rever"
         >

        <img :src="backImageUrl" alt="背景图"   style="
        width: 100%;
        min-width: 1200px;
        height: 100%;
        min-height: 700px;
        position: absolute;
        z-index: -999" >
        <div class="image flex-rever">
            <!--      头像图片-->
            <div >
                <router-link to="/login">
                    <img class="headImage" :src="imageUrl" alt="我的头像" v-show="imageUrl!==''">
                </router-link>


            </div>

            <!--      励志语句-->

            <div class="text" :style="{opacity: text.animation?'1':'0'}">
                {{content}}
            </div>


        </div>

     </div>

</template>

<script>
    import {computed, reactive, ref} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";

    import {useStore} from 'vuex'
    import axios from "axios";
    export default {
        name: "My",
        setup(){
            let store=useStore()

            let text=reactive({
                list:['岁岁有今朝','纸上得来终觉浅','百尺竿头更进一步','业精于勤荒于嬉','业精于勤荒于嬉'],
                index:0,
                animation:true
            })

            let imageUrl=ref("")

            let backImage=reactive({
                imgList:['my1.jpg','my2.jpg','my3.jpg'],
                imgIndex:0
            })

            let backImageUrl=computed(()=>{
                return  require("../../assets/my/"+backImage.imgList[backImage.imgIndex])
            })




            let content=computed(()=>{

                return text.list[text.index%text.list.length]
            })


            let initText = ()=>{
               // 1个小时
               let time=1000*60*60

                setInterval(()=>{
                    let hour=new Date().getHours()
                    text.index=hour%text.list.length
                },time)
            }



            onMounted(()=>{
                initText()
                axios.get("/api/user").then(resp=>{
                    if(resp.data.code===200){
                        if(resp.data.data!=null){
                            store.dispatch('addUser',resp.data.data)
                            imageUrl.value=store.state.user.image

                        }

                    }

                })


            })
            return{
                backImage,
                text,
                content,
                imageUrl,
                backImageUrl
            }
        }
    }
</script>

<style scoped lang="less">
    .my-box{
        width: 100%;
        min-width: 1200px;
        height: 700px;
        overflow-y: hidden;
        .my-video{

            position: absolute;
            object-fit: cover;
            object-position: center center;
            width: 100%;
            min-width: 1200px;
            height: 100%;
            min-height: 700px;
            z-index: -1;


        }
        .image{
            width: 100%;
            height: 100%;

            overflow: hidden;
            .headImage{
                width: 150px;
                height:150px;
                border-radius:150px;

            }
            .headImage:hover{

                animation: imageRotate 0.0001s ease-out infinite 0.1s;


            }


            .text{
                text-align: left;
                margin-left: 100px;
                width:800px;
                height: 200px;
                line-height: 200px;
                color: white;
                font-size: 30px;
                animation: text-push 0.5s ;
                transition: all 0.5s;


            }

        }
        .toggle-btn{
            position: absolute;
            bottom:50px;
            min-width: 350px;
            left: 600px;

            z-index: 999;
            button{

                background-color: var(--theme-color);
                color:#028090;
                border: 1px solid black;
            }
            button:hover{
               background-color: #242b39;
            }
        }


    }

    .flex-rever{
        display: flex;
       justify-content: flex-end;
        align-items: center;
    }
    .flex-center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .flex-center-col{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    @keyframes imageRotate {

            100%{
                transform: rotate(360deg);
            }

    }
    @keyframes text-push {
        0%{
            width: 0;
        }
        50%{
            width:1000px ;
        }
        100%{
            width: 800px;
        }
    }

</style>